<template>
  <div class="wrapper">
    <div class="title">
      可提数量:
      <span>{{total}}盒</span>
    </div>
    <div class="error" v-if="+total === 0">云仓可提数量不足....</div>
    <div v-else>
      <v-address
        :address="addressList"
        @hideAddress="hideAddress"
        @selectedAddress="selectedAddress"
      />
      <product
        :products="products"
        @changeProductNum="changeProductNum"
      />
    </div>
    <cube-button class="submit" primary @click="submit">确 定</cube-button>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Product from './components/Product'
import Address from '@/views/order/components/Address'
export default {
  name: 'StoreExtract',
  components: {
    Product,
    'v-address': Address
  },
  data() {
    return {
      total: 0,
      products: [],
      addressList: []
    }
  },
  methods: {
    getCounter() {
      api.Store.getCount().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.total = data.model.num
        data.products.forEach(x => {
          x.num = 0
        })
        this.products = data.products
      })
    },
    // 选择数量
    changeProductNum(item) {
      this.products.forEach(x => {
        if (x.id === item.id) {
          this.$set(x, 'num', item.num)
        }
      })
    },
    getAddress() {
      api.Store.getAddress().then(response => {
        let { data } = response
        data = base64.parse(data)
        data.forEach((v, k) => {
          if (k === 0) {
            v.selected = true
          } else {
            v.selected = false
          }
        })
        this.addressList = data
      })
    },
    hideAddress() {
      setTimeout(() => {
        this.addressList.sort((x, y) => {
          return (+y.selected) - (+x.selected)
        })
      }, 100)
    },
    selectedAddress(item) {
      this.addressList.forEach(x => {
        if (x.id === item.id) {
          this.$set(x, 'selected', true)
        } else {
          this.$set(x, 'selected', false)
        }
      })
    },
    submit() {
      if (this.addressList.length === 0) {
        return this.$createToast({
          type: 'error',
          time: 500,
          txt: '请添加收货地址',
          onTimeout: () => {
            this.$router.push('/service/address-edit/-2')
          }
        }).show()
      }
      const address = this.addressList.filter(x => x.selected)
      if (address.length === 0 && +this.check_store !== 2) {
        return this.$createToast({
          type: 'error',
          time: 500,
          txt: '请选择收货地址',
          onTimeout: () => {
          }
        }).show()
      }
      const address_id = (address && address[0] && address[0].id) || 0
      // 选择提货数量
      let sum = 0
      this.products.forEach(x => {
        sum += x.num
      })
      if (sum <= 0) {
        return this.$createToast({
          type: 'error',
          time: 500,
          txt: '请选择提货数量',
        }).show()
      }
      if (sum > this.total) {
        return this.$createToast({
          type: 'error',
          time: 500,
          txt: '提货数量错误',
        }).show()
      }
      // 提交
      api.Store.extract({
        num: this.total,
        address_id,
        products: this.products
      }).then(() => {
        this.$createToast({
          type: 'correct',
          time: 500,
          txt: '操作成功',
          onTimeout: () => {
            this.$router.push('/account/store')
          }
        }).show()
      })
    }
  },
  created() {
    this.getCounter()
    this.getAddress()
  }
}
</script>

<style scoped lang="stylus">
.title {
  background white
  margin 10px
  border-radius 5px
  padding 10px
  text-align left
  background $main_color
  color white
  letter-spacing 1px
}
.title span {
  color red
  font-weight 700
  font-size 16px
}
.error {
  margin-top: 50px;
  letter-spacing: 1px;
  color: #666;
}
.submit {
  position fixed
  bottom 0
}
</style>
